#アニメーション

Chart.js は、すぐにグラフをアニメーション化します。アニメーションの見た目やアニメーションにかかる時間を設定するためのオプションが多数用意されています。

const config = {
  type: 'line',
  data: data,
  options: {
    animations: {
      tension: {
        duration: 1000,
        easing: 'linear',
        from: 1,
        to: 0,
        loop: true
      }
    },
    scales: {
      y: { // defining min and max so hiding the dataset does not change scale range
        min: 0,
        max: 100
      }
    }
  }
};

const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [{
    label: 'Looping tension',
    data: [65, 59, 80, 81, 26, 55, 40],
    fill: false,
    borderColor: 'rgb(75, 192, 192)',
  }]
};

const config = {
  type: 'line',
  data: data,
  options: {
    transitions: {
      show: {
        animations: {
          x: {
            from: 0
          },
          y: {
            from: 0
          }
        }
      },
      hide: {
        animations: {
          x: {
            to: 0
          },
          y: {
            to: 0
          }
        }
      }
    }
  }
};

const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [{
    label: 'Try hiding me',
    data: [65, 59, 80, 81, 26, 55, 40],
    fill: false,
    borderColor: 'rgb(75, 192, 192)',
  }]
};

#アニメーション構成

アニメーション設定は3つのキーで構成されます。

これらのキーは次のパスで構成できます。

• `` - チャートオプション
• datasets[type]- データセットタイプのオプション
• overrides[type]- グラフの種類のオプション

これらのパスは次の環境で有効です。defaultsグローバル設定用とoptionsたとえば構成。

#アニメーション

デフォルトの構成はここで定義されています。コア.アニメーション.js

名前空間:options.animation

これらのデフォルトは次でオーバーライドできます。options.animationまたdataset.animationとお父さん937bf-30ec-4b5a-bcb9-402e48422a9f。これらのキーもスクリプト可能。

#アニメーション

アニメーション オプションでは、どの要素のプロパティをどのようにアニメーション化するかを構成します。 メインに加えて、アニメーション構成では、次のオプションが利用可能です。

名前空間:options.animations[animation]

#デフォルトのアニメーション

#トランジション

コアトランジションは次のとおりです。'active'、'hide'、'reset'、'resize'、'show'。 カスタム トランジションは、カスタム トランジションを渡すことで使用できます。modeにアップデート。 トランジションはメインを拡張しますアニメーション構成とアニメーション設定。

#デフォルトのトランジション

名前空間:options.transitions[mode]

#アニメーションを無効にする

アニメーション設定を無効にするには、アニメーション ノードを次のように設定する必要があります。falseただし、アニメーション モードは例外で、アニメーション モードはdurationに0。

chart.options.animation = false; // disables all animations
chart.options.animations.colors = false; // disables animation defined by the collection of 'colors' properties
chart.options.animations.x = false; // disables animation defined by the 'x' property
chart.options.transitions.active.animation.duration = 0; // disables the animation for 'active' mode

#イージング

利用可能なオプションは次のとおりです。

• 'linear'
• 'easeInQuad'
• 'easeOutQuad'
• 'easeInOutQuad'
• 'easeInCubic'
• 'easeOutCubic'
• 'easeInOutCubic'
• 'easeInQuart'
• 'easeOutQuart'
• 'easeInOutQuart'
• 'easeInQuint'
• 'easeOutQuint'
• 'easeInOutQuint'
• 'easeInSine'
• 'easeOutSine'
• 'easeInOutSine'
• 'easeInExpo'
• 'easeOutExpo'
• 'easeInOutExpo'
• 'easeInCirc'
• 'easeOutCirc'
• 'easeInOutCirc'
• 'easeInElastic'
• 'easeOutElastic'
• 'easeInOutElastic'
• 'easeInBack'
• 'easeOutBack'
• 'easeInOutBack'
• 'easeInBounce'
• 'easeOutBounce'
• 'easeInOutBounce'

見るロバート・ペナーのイージング方程式 (新しいウィンドウが開きます)。

#アニメーションコールバック

アニメーション設定は、外部描画をチャート アニメーションに同期するのに役立つコールバックを提供します。 コールバックはメインでのみ設定できますアニメーション構成。

名前空間:options.animation

コールバックには次のオブジェクトが渡されます。

{
  // Chart object
  chart: Chart,
  // Number of animations still in progress
  currentStep: number,
  // `true` for the initial animation of the chart
  initial: boolean,
  // Total number of animations at the start of current animation
  numSteps: number,
}

次の例では、チャートのアニメーション中に進行状況バーを塗りつぶします。

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        animation: {
            onProgress: function(animation) {
                progress.value = animation.currentStep / animation.numSteps;
            }
        }
    }
});

これらのコールバックの別の使用例が見つかります。この進行状況バーのサンプルでは、アニメーションの進行状況を示す進行状況バーが表示されます。